<?php
/*
 * Created on 27 mai 2011
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
 */
 
 
 class Visualiser_JavaScript_specview_specview_controller_visualiser_View extends Main_Global_View {
 	
 	private $test="cool";
 	
 	
 	private $moleculeId;
 	/*
 	 * molecule only holds some information like the name the id ...
 	 */
 	private $molecule ;
 	/*
 	 * atoms is an associative table whose keys are unique ids as found in the database and values are atom objects (from the model)
 	 */
 	private $atoms ;
 	/*
 	 * bonds is an associative table whose keys are integer and value is an array:
 	 * 	First element of the value array : the bond object 
 	 * 	Second element of the value array : the 2 unique ids of the atom the bond link
 	 */
 	private $bonds ;
 	
 	
 	
 	public function Visualiser_JavaScript_specview_specview_controller_visualiser_View($args){
 		$this->moleculeId=$args;
// 		$this->molecule=$args["molecule"];
// 		$this->atoms=$args["atoms"];
// 		$this->bonds=$args["bonds"];
 	}
 	
 	
 	public function mainContent(){
 		
 		ob_start();
 		
 		
 		?>
 		
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link rel="stylesheet" href="./JavaScript/specview/css/specview.css" />
<link rel="stylesheet" href="./JavaScript/specview/css/demo.css" />
<link rel="stylesheet" href="./JavaScript/specview/specview/style/style.html" />
<script src="./JavaScript/specview/third-party/closure/closure/goog/base.js"></script>
<script src="./JavaScript/specview/specview/deps.js"></script>
<script src="./JavaScript/specview/specviewTest/data/cmlfile.js"></script>
<script src="./JavaScript/specview/specview/json/douglascrockford-JSON-js-8e0b15c/json2.js"></script>
<script src="./Model/pajax_import.php?Atom"></script> 
<script src="./Model/pajax_import.php?Molecule"></script> 

<script>
    goog.require('goog.events.EventType');
    goog.require('goog.ui.Select');
    goog.require('specview.controller.Controller');
    goog.require('specview.controller.plugins.Highlight');
    goog.require('specview.io.SpectrumCMLParser');
    goog.require('specview.model.NMRdata');
    goog.require('goog.events.MouseWheelHandler');
    goog.require('goog.fx.Dragger');
    goog.require('goog.dom');
    goog.require('goog.math');
    goog.require('goog.ui.DragDropDetector');
    goog.require('goog.style');
    goog.require('goog.graphics');
</script>

<script type="text/javascript">
//alert("cacacacac");


//var test = new Test();
//alert("before: "+test.getAttribute())
//test.__Test(789);
//alert("after: "+test.getAttribute())
//test.add(10,15)
//alert("This message alert displays something nice:\n\nIt is nothing but a a PHP objects created inside JAVASCRIPT with javascript syntax:\nTest is a PHP class and add one of its instance method.The object has been created with javscript syntax and it works:\n"+test.add(10,15));

var o = <?php echo json_encode($this->moleculeId); ?>

alert("If you see that it means that we can communicate very easily from PHP to JAVASCCRIPT (passing arguments, using php classes with JAVASCRIOPT SYNTAX ....)"
+"\n\n\n"+o.moleculeId);

var molecule=MoleculeListener.prototype.onReadFromChebiId(o.moleculeId);


//var listener = new TestListener();
//listener.onAdd = function(ret) {
//  alert("You are watching a PHP object passed to javascript:" + ret);
//}

//var test = new Test(listener);
// Method will return immediatly
//result = test.add(20, 3);


   

//editor=null;
spectrumData=null;
zoom=0;

function initPage(){
			var isGrid=false;
			var isAxis=false;
			// uncomment next two lines to debug to console						
			var c = new goog.debug.Console(); 
			c.setCapturing(true); 

			var cmlData=cmlmolecules.split("$$END$$\n");
			var xmlDoc=specview.io.SpectrumCMLParser.getDocument(cmlData[0]);//XML document
			spectrumData=new specview.model.NMRdata();
			spectrumData=specview.io.SpectrumCMLParser.parseDocument(spectrumData,xmlDoc,navigator.appName);//a cmlObject
//			specview.io.SpectrumCMLParser.test(<?php $this->test; ?>)
			
			
			//Create the canvas and provide it with highlight plugins
			editor = new specview.controller.Controller(goog.dom.getElement('moleculeContainer'),{background : {color : 'white'}});
			editor.registerPlugin(new specview.controller.plugins.Highlight());
			spectrumData.setCoordinatesWithPixels(editor)

			editor.setSpecObject(spectrumData);
			editor.setModels([spectrumData]);
			editor.spectrumRenderer.renderAxis(spectrumData,editor.spectrumRenderer.box,'black');
			editor.spectrumRenderer.renderGrid(editor.specObject.mainSpecBox,'black',spectrumData.spectrum);

			//Display the informations about the molecule
		    goog.dom.getElement("molName").innerHTML="<b>Molecule name: </b>"+spectrumData.molecule.name;
		    goog.dom.getElement("molId").innerHTML="<b>Molecule id: </b>"+spectrumData.molecule.molecule_id;
     		goog.dom.getElement("experimentType").innerHTML="<b>Experiment type: </b>"+spectrumData.experienceType;

			//Creation of the tool bar
		    var select1 = new goog.ui.Select();
		    select1.addItem(new goog.ui.MenuItem('NMR_0', 0));
		    select1.addItem(new goog.ui.MenuItem('NMR_1', 1));
		    select1.addItem(new goog.ui.MenuItem('NMR_2', 2));
		    select1.addItem(new goog.ui.MenuItem('NMR_3', 3));
		    select1.addItem(new goog.ui.MenuItem('NMR_4', 4));
		    select1.addItem(new goog.ui.MenuItem('NMR_5', 5));
		    select1.addItem(new goog.ui.MenuItem('NMR_6', 6));
		    select1.addItem(new goog.ui.MenuItem('NMR_7', 7));
		    select1.addItem(new goog.ui.MenuItem('NMR_8', 8));
		    select1.addItem(new goog.ui.MenuItem('NMR_9', 9));
		    select1.addItem(new goog.ui.MenuItem('NMR_10', 10));
		    select1.addItem(new goog.ui.MenuItem('NMR_11', 11));
		    select1.addItem(new goog.ui.MenuItem('NMR_12', 12));
		    select1.addItem(new goog.ui.MenuItem('MS_0', 13));
		    select1.addItem(new goog.ui.MenuItem('MS_1', 14));
		    select1.addItem(new goog.ui.MenuItem('MS_2', 15)); 
		    select1.addItem(new goog.ui.MenuItem('MS_3', 16));
		    select1.addItem(new goog.ui.MenuItem('MS_4', 17));
		    select1.addItem(new goog.ui.MenuItem('MS_5', 18));
		    select1.addItem(new goog.ui.MenuItem('MS_6', 19));
		    
		    select1.setSelectedIndex(0);
		    select1.render(goog.dom.getElement('selectMolecule'));
		    
		    var grid= new goog.ui.Button("grid");
		    grid.render(goog.dom.getElement('selectMolecule'));
		    var axis= new goog.ui.Button("axis");
		    axis.render(goog.dom.getElement('selectMolecule'));


		    goog.events.listen(axis,goog.ui.Component.EventType.ACTION,
		    		function(e){
		    	if(!isAxis){
		    		editor.spectrumRenderer.renderAxis(spectrumData,editor.spectrumRenderer.box,'black');
		    		isAxis=true;
		    	}	
		    })
		    
		    goog.events.listen(grid, goog.ui.Component.EventType.ACTION,
		    		function(e){
		    	if(!isGrid){
		    		editor.spectrumRenderer.renderGrid(editor.specObject.mainSpecBox,'black',spectrumData.spectrum);
		    		isGrid=true;
		    	}
		    })
		    
		    goog.events.listen(select1, goog.ui.Component.EventType.ACTION,
		    function(e) {
		    	zoom=0;
		      isGrid=false;
		      isAxis=false;
		      var select = e.target;
		      var idx = select.getValue();
		      if(cmlData[idx]==undefined){
		          alert("NO SUCH MOLECULE IN THE ARRAY! Default molecle will be displayed : ")
		          idx=0;
		      }
		      var molfile=cmlData[idx];
		      var xmlDox;
			      xmlDoc=specview.io.SpectrumCMLParser.getDocument(molfile);//XML document
			      spectrumData=new specview.model.NMRdata();
			      spectrumData=specview.io.SpectrumCMLParser.parseDocument(spectrumData,xmlDoc);//a cmlObject
				  spectrumData.setCoordinatesWithPixels(editor,0)
			//CAREFUL WITH THE FOLLOWING LINE
			  editor.setSpecObject(spectrumData);
		      editor.setModels([spectrumData]);
		      editor.spectrumRenderer.renderAxis(spectrumData,editor.spectrumRenderer.box,'black');
			  editor.spectrumRenderer.renderGrid(editor.specObject.mainSpecBox,'black',spectrumData.spectrum);

			  goog.dom.getElement("molName").innerHTML="<b>Molecule name: </b>"+spectrumData.molecule.name;
			  goog.dom.getElement("molId").innerHTML="<b>Molecule id: </b>"+spectrumData.molecule.molecule_id;
			  goog.dom.getElement("experimentType").innerHTML="<b>Experiment type: </b>"+spectrumData.experienceType;
		      
		    });

};
goog.events.listen(window, goog.events.EventType.LOAD, initPage);

/**
 * Zoom
 */
var redrawSpectra=function(zoom){
	var rightBoundOfTheBox=spectrumData.mainSpecBox[1].x;
	var leftBoundOfTheBox=spectrumData.mainSpecBox[0].x;
	spectrumData.spectrum.setCoordinatesAccordingToZoom(zoom,rightBoundOfTheBox,leftBoundOfTheBox);
	editor.setSpecObject(spectrumData);
	editor.setModels([spectrumData]);
    editor.spectrumRenderer.renderAxis(spectrumData,editor.spectrumRenderer.box,'black');
    editor.spectrumRenderer.renderGrid(editor.specObject.mainSpecBox,'black',spectrumData.spectrum);
}

/**
 * Move the spectra
 */
var moveSpectrum=function(move,direction){
	spectrumData.spectrum.reScaleCoordinates(move,direction);
	editor.setSpecObject(spectrumData);
	editor.setModels([spectrumData]);
    editor.spectrumRenderer.renderAxis(spectrumData,editor.spectrumRenderer.box,'black');
	editor.spectrumRenderer.renderGrid(editor.specObject.mainSpecBox,'black',spectrumData.spectrum);
}



</script>


<body>
  <div id="slider1">0</div>
  <div id="slider2">x</div>
  <div id="slider3">y</div>
  <div id="slider4"><script>document.write("<--move-->")</script></div>
  <script type="text/javascript">
   var $ = goog.dom.getElement;
    var Z = 5;
    //Define the limits to drag the rectangle for zooming
    var limits = new goog.math.Rect(625,75, 148, 0);
    var limits2 = new goog.math.Rect(590,15,0,60);
    var limits3 = new goog.math.Rect(625,75,123,0);
    var limits4 = new goog.math.Rect(515,95,300,0)
    
    //To zoom in the y dimension
   var sliderY=new goog.fx.Dragger($('slider3'),null,limits2) 
    goog.events.listen(sliderY,'drag',function(e){
        var percent = Math.round(100 * (e.top - e.dragger.limits.top) /
  	          e.dragger.limits.height);
  
          $('slider3').innerHTML = percent;
    })
   //To zoom in the x dimension and toward the lower values
    var sliderXleft = new goog.fx.Dragger($('slider2'),null,limits3);
    goog.events.listen(sliderXleft,'drag',function(e){
        var percent = Math.round(100 * (e.left - e.dragger.limits.left) /
  	          e.dragger.limits.width);
  
          $('slider2').innerHTML = percent;
    })
   //To zoom in the x dimension and toward the bigger values
    var slider = new goog.fx.Dragger($('slider1'), null, limits);
    goog.events.listen(slider, 'drag', function(e) {
      var percent = Math.abs(Math.round(100 * (e.left - e.dragger.limits.left) /
    	          e.dragger.limits.width)-100);
    
            $('slider1').innerHTML = percent;

      if(typeof percent == 'number' && percent % 1 == 0){
    	  redrawSpectra(percent);
      }
    });
    //To move the spectra and to adjust the zoom
    var sliderMoveSpectra=new goog.fx.Dragger($('slider4'),null,limits4);
    var previousPercent=50;
    goog.events.listen(sliderMoveSpectra,'drag',function(e){
        var percent = Math.abs(Math.round(100 * (e.left - e.dragger.limits.left) /
  	          e.dragger.limits.width)-100);
        if(percent<previousPercent){
        	moveSpectrum(previousPercent,"right");
        }else if(percent>previousPercent){
        	moveSpectrum(previousPercent,"left");
        }
        previousPercent=percent;
    })
</script>
 <img name="track" style="position:absolute;left:665px;top:25px;display:block;z-index:10;" src="./JavaScript/specview/images/track.gif" width="100" height="50" alt="Zoom Tool"  title="Zoom Tool"/>

	<fieldset style="width:1200px">
        <legend><h1>Spectrum viewer</h1></legend>
        <br>
        <li id="molName"></li>
        <li id="molId"></li>
        <li id="experimentType"></li>

        <li id="experimentId"><b>Experiment id: </b><script>//document.write(spectrumData.molecule.name)</script></li>
        <label id="selectMolecule">Select a spectrum to render: </label>
        <br>
        <div id="moleculeContainer" style="height:300px"></div>
	</fieldset>


</body>
</html>

 		
 		
 		
 		<?php
 	}
 	
 }
?>
